<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>我的购物车</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
		<script src="JS/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="Js/bootstrap.min.js" type="text/javascript"></script>
		<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<!-- 引入自定义css文件 style.css -->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<style>
			body {
				margin-top: 20px;
				margin: 0 auto;
			}
			
			.carousel-inner .item img {
				width: 100%;
				height: 300px;
			}
			
			.container .row div {
				/* position:relative;
	 float:left; */
			}
			
			font {
				color: #3164af;
				font-size: 18px;
				font-weight: normal;
				padding: 0 10px;
			}
		</style>
		
<script type="text/javascript">

function deletecart(src){

	$.ajax({
        url:"${pageContext.request.contextPath}/DeleteCartServlet",
        async:false,
        type:"post",
        data:{'cmdyid':$(".cmdyid_"+src.name).val(),'userid':"${user_login.userid}"},
        dataType:"json",
        success:function(d){
        	if(d.msg==1){
        		alert("删除成功")
        		window.location.href="${pageContext.request.contextPath}/ShowCartSerlvet";
        	}else{
        		alert("删除失败")
        	}
        }
    });
}

function clearcart(){

	$.ajax({
        url:"${pageContext.request.contextPath}/ClearCartServlet",
        async:false,
        type:"post",
        dataType:"json",
        success:function(d){
        	if(d.msg==1){
        		alert("清空成功")
        		window.location.href="${pageContext.request.contextPath}/ShowCartSerlvet";
        	}else{
        		alert("清空失败")
        	}
        }
    });
}

</script>	
	</head>

	<body>

		
			<!--
            	
            	描述：菜单栏
            -->
			<div class="container-fluid">
				<div class="col-md-4">
					
				</div>
				<div class="col-md-5">
					<img src="img/header.png" />
				</div>
				<div class="col-md-3" style="padding-top:20px">
					<%@ include file="jhtop.jsp" %>   <!-- 顶部动态字 -->
				</div>
			</div>
			<!--
            	
            	描述：导航条
            -->
			<%@ include file="/jhtop1.jsp" %>   <!-- 商品类型显示和搜索框 -->


		<div class="container">
			<div class="row">

				<div style="margin:0 auto; margin-top:10px;width:950px;">
					<strong style="font-size:16px;margin:5px 0;">购物车详情</strong>
					<table class="table table-bordered">
						<tbody>
							<tr class="warning">
							    <th>选择</th>
								<th>图片</th>
								<th>商品</th>
								<th>货号</th>
								<th>价格</th>
								<th>数量</th>
								<th>小计</th>
								<th>操作</th>
							</tr>
							<c:forEach items="${cart }" var="n">
							<tr class="active">
							<td width="10%">
									<input type="checkbox" onchange = "check()" class="check" name="${n.cartid }" value="" maxlength="4" size="10">
								</td>
								<td width="60" width="40%">
									<input type="hidden" name="id" value="22">
									<img src="${pageContext.request.contextPath }/${n.img }" width="70" height="60">
								</td>
								<td width="10%">
									<a target="_blank">${n.cmdyname }</a>
								</td>
								<td width="10%">
									<input type="text" id="cmdyid" class = "cmdyid_${n.cartid }"name="cmdyid" value="${n.cmdyid }" maxlength="4" size="10">
								</td>
								<td width="20%">￥${n.price }
								</td>
								<td width="10%">
									<input type="text" name="quantity" id = "buynum_${n.cartid }" value="${n.buynum }" maxlength="4" size="10">
								</td>
								<td width="15%">
								    <input type = "hidden" value = "${n.total }" id = "c_${n.cartid }">
									<span class="subtotal">￥${n.total }</span>
								</td>
								<td>
									<a onclick="deletecart(this)" name="${n.cartid }" href="#"class="delete">删除</a>
								</td>
								<!-- 库存 --><input type = "hidden" id = "inventory_${n.cartid }" class = "" value = "${n.inventory }" name = "">
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>

			<div style="margin-right:130px;">
				<div style="text-align:right;">
					<em style="color:#ff6600;">
				
				<script type="text/javascript">
					var sum = 0
					var isfull = true;
					var hasmoney = true;
					var notselected = true;
					var s = ""
					var buynum_str = ""
					//check开始
				function check(){
					isfull = true;
					hasmoney = true;
					sum = 0
					var n=0
					s = ""
					buynum_str = ""
					$(".check").each(function(){
						if($(this).is(":checked")){
							notselected = false;
							var cartid = $(this).attr("name")
							n = $("#c_"+cartid).val()
			                n++
			                n--
			                sum+=n
							s += cartid+","
							//获取每条数据的buynum并且对比
							var buynum = $("#buynum_"+cartid).val()
							buynum_str += (buynum+",")
							var inventory = $("#inventory_"+cartid).val()
							inventory++
							inventory--
							var money = "${user_login.money}";
							money++
							money--
// 							alert(money)
							if(buynum > inventory){
								isfull = false;
// 								alert("库存不足")
							}
							if(sum > money){
								hasmoney = false;
// 								alert("钱不足")
							}
							
						}//如果选中结束
					})//each结束
					s = s.substring(0,s.length-1);
					buynum_str = buynum_str.substring(0,s.length-1);
					$("#aa").attr("name","${pageContext.request.contextPath }/CommitOrderServlet?"+s)
					$("#strong").html("￥"+sum+"元")
				}//check结束
				
				//提交订单开始
				function commitorder(){
					var urls = $("#aa").attr("name");
					if(!isfull){
						alert("库存不足")
					}
					if(!hasmoney){
						alert("余额不足")	
					}
					if(notselected){
						alert("请选择商品")	
					}
					if(isfull&&hasmoney&&!notselected){
// 						alert("cartid"+s)
						$.ajax({
					        url:"${pageContext.request.contextPath }/CommitOrderServlet",
					        async:false,
					        type:"post",
					        data:{"cartid":s,"buynum_str":buynum_str,"sum":sum},
					        dataType:"json",
					        success:function(d){
					        	if(d.msg=="1"){
					        		alert("提交订单成功")
					        		window.location.href="${pageContext.request.contextPath}/ShowOrderServlet";
					        	}else{
					        		alert("提交失败，库存不足或余额不足")
// 					        		window.location.href="${pageContext.request.contextPath}/ShowCartSerlvet";
					        	}
					        }
					    });
					}
						
					
				}//提交订单结束
				</script>
<%-- 				<c:forEach items="${cart}" var="m"> --%>
				
<%--                 <c:set var="sum" value="${ 0+sum+m.total}"></c:set> --%>
<!--      -->
<%--                 </c:forEach> --%>

				<script type="text/javascript">
					
				</script>
			</em>&nbsp; 商品金额: <strong style="color:#ff6600;" id = "strong"></strong>
				</div>
				<div style="text-align:right;margin-top:10px;margin-bottom:10px;">
					<a onclick="clearcart(this)" href="#" id="clear" class="clear">清空购物车</a>
					<a href="#" id = "aa" name = "">
						<input onclick="commitorder()" type="submit" width="100" value="提交订单" name="submit" border="0" style="background: url('./img/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
						height:35px;width:100px;color:white;">
					</a>
				</div>
			</div>

		</div>

		
		

	</body>

</html>